import React, { useEffect, useState, useRef } from "react";
import {
  Select,
  Form,
  Button,
  InputNumber,
  Switch,
  Input,
} from "@douyinfe/semi-ui";
import {
  getDataSource,
  changeSource,
  getAllFields,
  addField,
  commonInfo,
} from "./const";
import {
  IconMark,
  IconEyeOpened,
  IconEyeClosed,
  IconDelete,
  IconPlus,
} from "@douyinfe/semi-icons";

function App(props) {
  const { deepConfig, setConfig } = props; // 全局配置
  const { Option } = Select;
  const formRef = useRef(); // form组件
  const [dataSource, setDataSource] = useState([]); // 数据源下拉
  const [dataRange, setDataRange] = useState([]); // 数据范围下拉
  commonInfo.deepConfig = deepConfig;
  commonInfo.setConfig = setConfig;
  commonInfo.formRef = formRef;
  commonInfo.setDataRange = setDataRange;

  function onChangeSource(value) {
    changeSource(value);
  }
  function onChangeRange(value) {
    getAllFields(value);
  }
  function onAddField(id) {
    addField(id);
  }

  useEffect(() => {
    // 获取数据源
    getDataSource().then((res) => setDataSource(res));
  }, []);

  return (
    <div className="right-box">
      <Form ref={formRef} layout="horizontal" labelWidth="100%">
        <Form.Select
          field="data_sorce"
          label={{ text: "数据源" }}
          filter
          onChange={onChangeSource}
        >
          {dataSource.map((item) => (
            <Option key={item.id} value={item.id}>
              {item.name}
            </Option>
          ))}
        </Form.Select>
        <Form.Select
          field="data_range"
          label={{ text: "数据范围" }}
          filter
          onChange={onChangeRange}
        >
          <Option value="all">全部数据</Option>
          {dataRange.map((item) => (
            <Option key={item.id} value={item.id}>
              {item.name}
            </Option>
          ))}
        </Form.Select>
        <Form.Slot label={{ text: "字段" }}>
          {deepConfig.show_fields?.map((item) => (
            <div key={item.title} className="field-item">
              <div className="field-item-title">
                {["text".includes(item.type)] && <IconMark />}
                {item.title}
              </div>
              <div className="field-item-phone">
                {item.is_phone_filed && <IconEyeOpened />}
                {!item.is_phone_filed && <IconEyeClosed />}
                移动端
              </div>
              <IconDelete className="field-item-delete" />
            </div>
          ))}
          <Button
            theme="borderless"
            type="primary"
            className="field-item-add-btn"
          >
            <IconPlus />
            添加字段
          </Button>
          <Select
            filter
            placeholder="搜索"
            className="add-line-select"
            onChange={onAddField}
          >
            {deepConfig.all_fields?.map((item) => (
              <Select.Option key={item.id} value={item.id}>
                {item.name}
              </Select.Option>
            ))}
          </Select>
        </Form.Slot>
        <Form.Slot label={{ text: "行数" }}>
          <div className="form-second-box">
            <div>
              <Form.Label text="桌面端"></Form.Label>
              <InputNumber />
            </div>
            <div className="form-second-box-item-2">
              <Form.Label text="移动端"></Form.Label>
              <InputNumber />
            </div>
          </div>
        </Form.Slot>
        <Form.Slot label={{ text: "滚动" }}>
          <div className="form-second-box">
            <div className="form-second-box-item">
              <Form.Label text="模式"></Form.Label>
              <Select filter>
                <Select.Option value="line">单行</Select.Option>
                <Select.Option value="page">整页</Select.Option>
              </Select>
            </div>
            <div className="form-second-box-item form-second-box-item-2">
              <Form.Label text="间隔"></Form.Label>
              <InputNumber suffix={"s"} />
            </div>
          </div>
        </Form.Slot>
        <div className="switch-header">
          <Form.Label text="高亮"></Form.Label>
          <Switch onChange={(v, e) => console.log(v)}></Switch>
        </div>
        <div className="form-second-box">
          <div className="form-second-box-item">
            <Form.Label text="高亮行"></Form.Label>
            <div className="line-height-card-box">
              <div
                className={`line-height-card ${
                  true && "line-height-card-active"
                }`}
              >
                <span>首行</span>
              </div>
              <div className={["line-height-card"].join(" ")}>
                <span>指定行</span>
              </div>
            </div>
            <Input
              className="w-100-25"
              placeholder="通过逗号分隔，例如：1,3,5"
            ></Input>
            <Form.Label text="背景色"></Form.Label>
            <div className="line-height-color-box w-100-25">
              <div className="line-height-color-item">
                <label htmlFor="label-form-1">浅色模式</label>
                <input type="color" id="label-form-1" />
              </div>
              <div className="line-height-color-item">
                <label htmlFor="label-form-2">深色模式</label>
                <input type="color" id="label-form-2" />
              </div>
            </div>
          </div>
        </div>
        <div className="switch-header">
          <Form.Label text="溢出文本滚动"></Form.Label>
          <Switch onChange={(v, e) => console.log(v)}></Switch>
        </div>
        <div className="form-second-box">
          <div className="form-second-box-item">
            <Form.Label text="速率"></Form.Label>
            <div className="line-height-color-box w-100">
              <InputNumber suffix={"px/s"} />
            </div>
          </div>
        </div>
        <div className="switch-header">
          <Form.Label text="斑马纹"></Form.Label>
          <Switch onChange={(v, e) => console.log(v)}></Switch>
        </div>
        <div className="form-second-box">
          <div className="form-second-box-item">
            <Form.Label text="奇行背景色"></Form.Label>
            <div className="line-height-color-box w-100-25">
              <div className="line-height-color-item">
                <label htmlFor="label-form-3">浅色模式</label>
                <input type="color" id="label-form-3" />
              </div>
              <div className="line-height-color-item">
                <label htmlFor="label-form-4">深色模式</label>
                <input type="color" id="label-form-4" />
              </div>
            </div>
            <Form.Label text="偶行背景色"></Form.Label>
            <div className="line-height-color-box w-100-25">
              <div className="line-height-color-item">
                <label htmlFor="label-form-5">浅色模式</label>
                <input type="color" id="label-form-5" />
              </div>
              <div className="line-height-color-item">
                <label htmlFor="label-form-6">深色模式</label>
                <input type="color" id="label-form-6" />
              </div>
            </div>
          </div>
        </div>
      </Form>
    </div>
  );
}

export default App;
